<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="Content-Language" content="zh-CN"/>
        <meta name="robots" content="index, follow" />
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
        <title>氿上网</title>
        {$system_css}
        {$system_js}
        <script src="{$asset_path}js/jcrop/jquery.Jcrop.min.js"></script>
        <link rel="stylesheet" href="{$asset_path}js/jcrop/jquery.Jcrop.min.css" type="text/css" />

        <script language="Javascript">

            $(function(){
                var jcrop_api, boundx, boundy;
 
            
                $('#cropbox').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    aspectRatio: 1
                },function(){
                    // Use the API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    // Store the API in the jcrop_api variable
                    jcrop_api = this;
                });


                function checkCoords()
                {
                    if (parseInt($('#w').val())) return true;
                    alert('请选择要剪切的区域');
                    return false;
                };
            
            
                function updatePreview(c)
                {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                    if (parseInt(c.w) > 0)
                    {
                        var rx = 100 / c.w;
                        var ry = 100 / c.h;

                        $('#preview').css({
                            width: Math.round(rx * boundx) + 'px',
                            height: Math.round(ry * boundy) + 'px',
                            marginLeft: '-' + Math.round(rx * c.x) + 'px',
                            marginTop: '-' + Math.round(ry * c.y) + 'px'
                        });
                    }
                };
            });
        </script>
    </head>
    <body>
        <div id="OSC_Screen">
            {include file='header.html'}
            <div id="OSC_Content">
                 {include file="message.html"}
                <div class='QuestionList' style="width: auto">
                  {include file='user_nav.html'}
                    
                    <div id="outer" >
                        <div class="jcExample">
                            <form name="myform" action="{$action_upload_avatar}" method="post" id="myform" enctype="MULTIPART/FORM-DATA" >
                                <input type="file" name="avatar" id="avatar" /><input type="submit" value="上传" />
                            </form>
                            <div class="article" style="border:1px solid #000;float:left;margin-right:20px;">
                                <!-- This is the image we're attaching Jcrop to -->
                                <img src="{$user_avatar}" id="cropbox" />
                                <!-- This is the form that our event handler fills -->
                                <form action="{$action_crop}" method="post" onsubmit="return checkCoords();">
                                    <input type="hidden" id="x" name="x" />
                                    <input type="hidden" id="y" name="y" />
                                    <input type="hidden" id="w" name="w" />
                                    <input type="hidden" id="h" name="h" />
                                    <input type="submit" value="确认" /> *提示成功后，头部如没更新，请按CTRL+F5刷新浏览器
                                </form>
                            </div>
                        </div>
                        <div style="width:100px;height:100px;overflow:hidden;border:1px solid #000;">
                            <img src="{$user_avatar}" id="preview" alt="Preview" class="jcrop-preview" />
                        </div>
                    </div>

                </div>
                <div class='clear'></div></div>
            <div class='clear'></div>
            {include file="footer.html"}
        </div>

    </body>
</html>
